<template>
  <view class="index">
    <view class="nav-wap">
      自定义导航
    </view>
    <cloud-course
      v-for="(item, idx) in cloudData"
      :key="idx"
      :info="item"
      :group-tag="false"/>
  </view>
</template>

<script>
/** 引入接口 */
import  {
  syncCourses,
  specialCourses,
  publicCourses,
  cloudCourses
} from "../../libs/axios/modules/select-api";

/* 引入组件 */
const CloudCourse = () => import('../../components/course-list/cloud-course')

export default {
  name: 'Index',
  components: {
    CloudCourse
  },
  data () {
    return {
      syncData: [], // 同步课
      specialData: [], // 专题课
      cloudData: [], // 云课
      publicData: [], // 公开课
    }
  },
  onShow () {
    this.getDataList()
  },
  methods: {
    /* 获取首页数据 */
    getDataList () {
      // this.isLoading = true
      const gradeId = '2'
      const recommend = '1'
      Promise.all([
        syncCourses({
          grade_id: gradeId,
          recommend_type: recommend
        }),
        specialCourses({
          grade_id: gradeId,
          recommend_type: recommend
        }),
        cloudCourses({
          grade_id: gradeId,
          recommend_type: recommend
        }),
        publicCourses({
          grade_id: gradeId,
          recommend_type: recommend
        })
      ])
        .then(([
             { data: syncInfo },
             { data: specialInfo },
             { data: cloudInfo },
             { data: publicInfo }
           ]) => {
            // 同步课列表
            this.syncData = syncInfo
            // 专题课
            this.specialData = specialInfo
            // 云课
            this.cloudData = cloudInfo
            // 专题课
            this.publicData = publicInfo
          })
        .catch(e => {
          console.log(e)
        })
    }
  }
}
</script>

<style lang="scss">
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  padding: 32px 22px;
  > view {
    margin-top: 32px;
  }
  .nav-wap {
    background: pink;
  }
}
</style>
